<template>
    <div class="timeline-container">
        <div class="top_bg"></div>
        <div class="timeline-container-inner">
            <a-timeline class="custom-timeline">
                <a-timeline-item
                    v-for="(time, index) in timeSlots"
                    :key="index"
                    @click="selectTime(time)"
                >
                    {{ time }}
                    <template #dot>
                        <div
                            :class="selectedTime === time ? 'gold' : 'blue'"
                        ></div>
                    </template>
                </a-timeline-item>
            </a-timeline>
        </div>
        <div class="bottom_bg"></div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { storeToRefs } from "pinia";
import { useCityRoadStore } from "@/store/city-road";
import {
    Timeline as ATimeline,
    TimelineItem as ATimelineItem,
} from "ant-design-vue";
import dayjs from "dayjs";
const store = useCityRoadStore();
const { startTime, endTime } = storeToRefs(store);
const timeSlots = [];
for (let hour = 5; hour <= 22; hour++) {
    for (let minute = 0; minute < 60; minute += 15) {
        const time = `${hour.toString().padStart(2, "0")}:${minute
            .toString()
            .padStart(2, "0")}`;
        timeSlots.push(time);
    }
}

const selectedTime = ref(startTime);

const selectTime = (time) => {
    selectedTime.value = time;
    store.updateStartTime(time);
    store.updateEndTime(
        dayjs("2024-01-01 " + time)
            .add(15, "minute")
            .format("HH:mm")
    );
};
</script>

<style>
.ant-timeline .ant-timeline-item-head {
    background-color: transparent !important;
}
.ant-timeline-item {
    padding-bottom: 10px !important;
}
.custom-timeline .ant-timeline-item-tail {
    background-image: url("@/assets/city-road/timeline/timeline_bg.png");
    background-size: cover;
    background-position: center;
    border-inline-start: none !important;
    inset-inline-start: auto !important;
    width: 16px;
    /* 其他样式可以根据需要调整 */
}
</style>
<style lang="scss" scoped>
.timeline-container {
    padding: 50px 0;
    width: 110px;
    height: 679px;
    background: #032136;
    border-radius: 100px;
    border: 1px solid rgba(124, 161, 237, 0.3);
    opacity: 0.8;
    scrollbar-width: none;
    display: flex;
    justify-content: center;
}

.timeline-container-inner::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Opera */
}

.timeline-container-inner {
    padding: 0 10px;
    width: 100%;
    height: 100%;
    position: relative;
    overflow-y: auto;
}

a-timeline-item {
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

a-timeline {
    display: flex;
    flex-direction: column;
    align-items: center;
}

a-timeline-item::before {
    content: "";
    flex-shrink: 0;
    width: 10px; /* Adjust as needed */
    height: 10px; /* Adjust as needed */
    background-color: currentColor;
    border-radius: 50%;
    margin-right: 8px; /* Space between dot and text */
}

.blue {
    width: 16px;
    height: 16px;
    background: url("@/assets/city-road/timeline/blue_dot.png") no-repeat center
        center;
    background-size: cover;
}

.gold {
    width: 21px;
    height: 21px;
    background: url(@/assets/city-road/timeline/gold_dot.png) no-repeat center
        center;
}

.top_bg {
    background-image: url("@/assets/city-road/timeline/top_bg.png");
    background-size: 100% 100%;
    background-position: center;
    height: 174px;
    width: 100%;
    position: absolute;
    z-index: 20;
    top: 0;
}

.bottom_bg {
    background-image: url("@/assets/city-road/timeline/bottom_bg.png");
    background-size: 100% 100%;
    background-position: center;
    height: 174px;
    width: 100%;

    position: absolute;
    z-index: 20;
    bottom: 0;
}
</style>
